<!-- 发布文章 -->
<template>
  <div class="container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>发布新文章</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="$router.back()"
          >取消编辑</el-button
        >
      </div>
      <div class="item">
        <el-form ref="form" :model="form" label-width="200px">
          <el-form-item label="文章标题">
            <el-input
              style="width: 250px"
              v-model="form.title"
              clearable
              aria-required
            ></el-input>
          </el-form-item>

          <el-form-item label="文章分类">
            <el-select v-model="form.cate_id" placeholder="请选择活动区域">
              <el-option label="Linux" :value="1"></el-option>
              <el-option label="JavaScrirt" :value="2"></el-option>
            </el-select>
          </el-form-item>

          <!-- 文章插图功能未完善 -->
          <el-form-item label="文章插图">
            <a href="javascript:;" class="file"
              >选择文件
              <input
                type="file"
                name="cover_img"
                accept="image/*"
                ref="cover_img"
                @change="upload_img"
              />
            </a>
          </el-form-item>
        </el-form>

        <div class="item content">
          <quill-editor
            ref="myTextEditor"
            v-model="form.content"
            :options="editorOption"
            style="height: 600px; margin-bottom: 10px"
          ></quill-editor>
        </div>

        <div class="item">
          <button @click="submit">提交</button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import myNav from "../../components/myNav.vue";
import { Publish } from "../../api/article";

export default {
  name: "Public",
  data() {
    return {
      form: {
        title: "",
        cate_id: "",
        content: "",
        cover_img: null,
      },
      dataList: "",
      dialogImageUrl: "",
      dialogVisible: false,
      editorOption: {},
    };
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      console.log(file);
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    upload_img() {
      let cover = this.$refs.cover_img.files;
      console.log(cover[0].size)
      if (cover[0].size > 181736) {
        return this.$message.error("照片过大");
      }
      this.$message.success("图片添加成功");
      this.form.cover_img = cover[0];
    },
    async submit() {
      const formData = new FormData();
      for (const key in this.form) {
        if (Object.hasOwnProperty.call(this.form, key)) {
          if (this.form[key] != "") {
            formData.append(key, this.form[key]);
          } else return this.$message.error(`请输入${key}值`);
        }
      }
      if (this.form.cover_img == null)
        return this.$message.error("请上传封面图片");
      let { data } = await Publish(formData);
      if (data.status === 200) {
        this.$message.success("新增文章成功!");
        this.$router.replace("/");
      }
    },
  },
  components: {
    myNav,
  },
};
</script>


<style lang="less" scoped>
.container {
  height: 100%;
  background-color: #fff;
  .box-card {
    width: 90%;
    margin-left: 5%;
    margin-top: 20px;
  }
  .content {
    height: 300px;
    overflow: auto;
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc;
  }

  .file {
    position: relative;
    display: inline-block;
    background: #d0eeff;
    border: 1px solid #99d3f5;
    border-radius: 4px;
    padding: 4px 12px;
    overflow: hidden;
    color: #1e88c7;
    text-decoration: none;
    text-indent: 0;
    line-height: 30px;
  }
  .file input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
  }
  .file:hover {
    background: #aadffd;
    border-color: #78c3f3;
    color: #004974;
    text-decoration: none;
  }
}
</style> 